<div class="home">
  <!-- 轮播图 -->
  <app-carousel #carousel [activeIndex]="carouselActiveIndex" (changeSlide)="onChangeSlide($event)">
    <!-- 将此段内容投影到 CarouselComponent 组件中 -->
    <div class="app-carousel">
      <nz-carousel nzAutoPlay [nzEffect]="'fade'" [nzDotRender]="carousel.dotRef"
        (nzBeforeChange)="onBeforeChange($event)">
        <div nz-carousel-content class="carousel-item" *ngFor="let banner of banners">
          <a [href]="banner.url" target="_blank" class="banner-item">
            <img [src]="banner.imageUrl">
          </a>
        </div>
      </nz-carousel>
    </div>
    <!-- ./ 将此段内容投影到 CarouselComponent 组件中 -->
  </app-carousel>
  <!-- ./ 轮播图 -->

  <!-- 热门推荐 -->
  <div class="main">
    <div class="wrap">
      <div class="left">
        <div class="sec">
          <div class="up">
            <!-- 热门标签 -->
            <div class="navs">
              <h2>
                <i></i>
                <a>热门推荐</a>
              </h2>
              <nav>
                <ng-container *ngFor="let tag of hotTags; index as i">
                  <a [routerLink]="'/music/sheets'" [queryParams]="{category: tag.name}">{{tag.name}}</a>
                  <nz-divider nzType="vertical" style="margin: 0 10px;" *ngIf="i+1 != hotTags.length"></nz-divider>
                </ng-container>
              </nav>
            </div>
            <div class="more">
              <a href="#">更多</a>
              <i nz-icon class="ml-1" style="color: #c10d0c;" nzType="arrow-right" nzTheme="outline"></i>
            </div>
          </div>
          <!-- ./ 热门标签 -->
          <!-- 热门歌曲 -->
          <div class="down">
            <nz-spin [nzSpinning]="isSongSheetLoading">
              <div class="down-wrap">
                <app-single-sheet class="sheet-item" *ngFor="let songSheet of songSheets" [sheet]="songSheet"
                  (onPlaySheet)="onPlaySheet($event)" (click)="routerToSongDetail(songSheet.id)">
                </app-single-sheet>
              </div>
            </nz-spin>
          </div>
          <!-- ./ 热门歌曲 -->
        </div>
      </div>
      <!-- ./ 热门推荐 -->

      <div class="right">
        <!-- 登录入口 -->
        <app-login-card></app-login-card>
        <!-- ./ 登录入口 -->
        <!-- ./ 歌手列表 -->
        <div class="settled-singer">
          <div class="tit"><b>入驻歌手</b></div>
          <div class="list">
            <div class="card" *ngFor="let singer of singers" [routerLink]="['/music/singers', singer.id, 'detail']">
              <div class="pic">
                <img [src]="singer.picUrl" [alt]="singer.name">
              </div>
              <div class="txt">
                <b class="ellipsis">{{singer.name}}</b>
                <span>专辑数：{{singer.albumSize}}</span>
              </div>
            </div>
          </div>
        </div>
        <!-- ./ 歌手列表 -->
      </div>
    </div>
  </div>
</div>